<template>
  <div class="se-container">
    <div class="se-header">消息推送管理</div>
    <el-form :inline="true" :model="search" class="demo-form-inline" style="padding: 0 20px;">
      <el-form-item label="消息标题">
        <el-input v-model="search.title" placeholder="请输入标题" @keypress.native.enter="getPageList"/>
      </el-form-item>
      <el-form-item label="消息内容">
        <el-input v-model="search.content" placeholder="请输入内容" @keypress.native.enter="getPageList"/>
      </el-form-item>
      <el-form-item label="消息大类">
        <el-select v-model="search.label" placeholder="请选择消息大类">
          <el-option label="全部" value=""/>
          <el-option label="任务" value="1"/>
          <el-option label="日志" value="2"/>
          <el-option label="公告" value="3"/>
          <el-option label="oa审批" value="4"/>
          <el-option label="日程" value="5"/>
          <el-option label="crm消息" value="6"/>
        </el-select>
      </el-form-item>
      <el-form-item label="消息状态">
        <el-select v-model="search.isRead" placeholder="请选择状态">
          <el-option label="全部" value=""/>
          <el-option label="已读" value="1"/>
          <el-option label="未读" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData" >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="se-body">
      <div class="se-table-header">
        <el-button class="se-table-header-button" type="primary" @click="addExamine">发布新消息</el-button>
      </div>
      <el-table
        v-loading="loading" id="examine-table" :data="list" :height="tableHeight"
        class="main-table" highlight-current-row style="width: 100%" >
        <el-table-column show-overflow-tooltip prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="content" label="内容"></el-table-column>
        <el-table-column show-overflow-tooltip prop="label" label="消息大类" width="80" :formatter="labelFormatter">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createUserName" label="创建人" width="180">
          <template slot-scope="scope">
            {{scope.row.createUser == '0' ? '系统':scope.row.createUserName}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="recipientUserName" label="接收人" width="180"></el-table-column>
        <el-table-column show-overflow-tooltip prop="isRead" label="状态" width="80">
          <template slot-scope="scope">
            {{scope.row.isRead == '1' ? '已读':'未读'}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="180"></el-table-column>
        <el-table-column/>
      </el-table>
    </div>
    <div class="p-contianer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size.sync="pageSize"
        :total="total"
        class="p-bar"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
    <el-dialog title="发布新消息" :visible.sync="dialogAddVisible" @closed="edClosed('ed')">
      <el-form ref="ed" :model="ed" :rules="rules" label-width="80px" size="mini">
        <el-form-item label="消息类型" prop="label">
          <el-select v-model="ed.label">
            <el-option label="任务" value="1"/>
            <el-option label="日志" value="2"/>
            <el-option label="公告" value="3"/>
            <el-option label="oa审批" value="4"/>
            <el-option label="日程" value="5"/>
            <el-option label="crm消息" value="6"/>
          </el-select>
        </el-form-item>
        <el-form-item label="消息标题" prop="title">
          <el-input v-model="ed.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="content">
          <el-input type="textarea" v-model="ed.content" autocomplete="off"></el-input>
        </el-form-item>
       <!-- <el-form-item label="接收人" prop="recipientUser">
          <el-input  v-model="ed.recipientUser" autocomplete="off" @focus="showSel"></el-input>
        </el-form-item>-->
        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="edSubm('ed')">发布</el-button>
          <el-button @click="edClr('ed')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="发布新消息" :visible.sync="selRepUserDlg" @closed="edClosed('ed')">
      <el-form ref="ed" :model="ed" :rules="rules" label-width="80px" size="mini">
        <el-form-item label="消息类型" prop="label">
          <el-select v-model="ed.label">
            <el-option label="任务" value="1"/>
            <el-option label="日志" value="2"/>
            <el-option label="公告" value="3"/>
            <el-option label="oa审批" value="4"/>
            <el-option label="日程" value="5"/>
            <el-option label="crm消息" value="6"/>
          </el-select>
        </el-form-item>
        <el-form-item label="消息标题" prop="title">
          <el-input v-model="ed.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消息内容" prop="content">
          <el-input type="textarea" v-model="ed.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接收人" prop="recipientUser">
          <el-input  v-model="ed.recipientUser" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px;">
          <el-button type="primary" @click="edSubm('ed')">发布</el-button>
          <el-button @click="edClr('ed')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { Loading } from 'element-ui'
  import {getPushAppMessage } from '@/api/systemManagement/SystemMessage'
  import {pushMessageAllUser } from '@/api/systemManagement/SystemPush'

  export default {

    name: 'SystemPush',
    currentPage: 1,
    pageSize: 15,
    pageSizes: [15, 30, 60, 100],
    total: 0,
    mixins: [],
    data() {
      return {
        selRepUserDlg:false,
        search: {
          label:'',
          title: '',
          content: '',
          isRead: ''
        },
        last_version:{
          Android:'',
          iOS:''
        },
        ed: {
          label:'1',
          title:'',
          content:'',
          recipientUser:''
        },
        rules: {
          label: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          title: [
            { required: true, message: '请输入标题', trigger: 'change' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'change' }
          ],
         /* recipientUser: [
            { required: true, message: '请选择接收人', trigger: 'change' }
          ]*/
        },
        dialogAddVisible:false,
        loading: false, // 加载动画
        tableHeight: document.documentElement.clientHeight - 240, // 表的高度
        list: [],
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 0,

      }
    },
    computed: {},
    mounted() {
      this.getList()
    },
    methods: {
      showSel(){
        console.log('asdfsadfasd');
        this.selRepUserDlg = true
      },
      searchData(){
        this.currentPage = 1;
        this.getList();
      },
      /** 获取列表数据 */
      getList() {
        this.loading = true
        this.search['page'] = this.currentPage
        this.search['limit'] = this.pageSize
        getPushAppMessage(this.search)
          .then(res => {
            this.list = res.data.list
            this.total = res.data.total
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
      /** 格式化字段 */
      fieldFormatter(row, column) {

        return row[column.property]
      },
      /**
       *  添加
       */
      addExamine() {
        this.dialogAddVisible = true;
      },
      // 提交
      edSubm(fm){
        var loadingis = Loading.service({
          target: document.getElementById('#app'),
          text:'消息发布中....'
        })
        this.$refs[fm].validate((valid) => {
          if (valid) {
            this.loading = true
            pushMessageAllUser(this.ed).then(res => {
              loadingis.close();
              if(res.code == 200){
                this.dialogAddVisible = false;
                this.$message.success("发布成功")
                this.currentPage = 1;
                this.getList()
              }else {
                this.$message.error("发布失败!")
              }

            })
              .catch(()=>{
                loadingis.close();
              });
          } else {

            return false;
          }
        });
      },
      labelFormatter(row,index){
        let tp =['', '任务', '日志', '公告', 'oa审批', '日程', 'crm消息']
        if(row.label > tp.length){
          return '-';
        }
        return tp[row.label];
      },
      edClr(fm){
        this.dialogAddVisible = false;
        this.edRT();
      },
      edClosed(fm){
        this.edRT();
      },
      // 更改每页展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        this.getList()
      },

      edRT(){
        this.ed = {
          versionId:'',
            appType:'0',
            version:'',
            downloadUrl:'',
            updateDescription:'',
            forciblyUpdate:'0',
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .se-header {
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
  }

  .se-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
  }

  .se-table-header {
    height: 50px;
    background-color: white;
    position: relative;
    .se-table-header-button {
      float: right;
      margin-right: 20px;
      margin-top: 10px;
    }
  }

  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }

  @import '../styles/table';
</style>
